<template>
  <div class="container-pinia">
    <header>
      <div v-for="item in selectMode" :key="item.id" :class="{active: index === item.id}" @click="editView(item)">{{ item.title }}</div>
    </header>
    <main>
      <component :is="nowComponent"></component>
    </main>
  </div>
</template>

<script setup>
// import composition from './components/composition.vue'
// import options from './components/options.vue'
const selectMode = ref([
  {
    title: 'options API使用',
    id: 0,
    name: 'options'
  },
  {
    title: 'composition API使用',
    id: 1,
    name: 'composition'
  }
])
// 获取某个文件夹下所有的.vue文件
const moduleComponent = import.meta.glob('./components/*.vue', { eager: true })
const allComponent = {}
for (let iterator in moduleComponent) {
  // 获取文件名称
  const componentName = iterator.slice(iterator.lastIndexOf('/') + 1).split('.')[0]
  // 放入
  allComponent[componentName] = moduleComponent[iterator].default
}
// console.log(allComponent)
const nowComponent = shallowRef(allComponent['options'])
const index = ref(0)
// const nowState = ref(false)
const editView = (value) => {
  index.value = value.id
  nowComponent.value = allComponent[value.name]
}
</script>

<style lang="scss" scoped>
.container-pinia{
  width: 100% !important;
  height: 100%;
}
header{
  display: flex;
  justify-content: center;
  div {
    font-weight: bold;
    cursor: pointer;
    &:last-child {
      margin-left: 30px;
    }
    &.active {
      color: #c94515;
    }
  }
}
main {
  margin-top: 50px;
  width: 100%;
  min-height: 200px;
}
</style>